import { FC } from 'react';
import { createRoot } from 'react-dom/client';
import React from 'react';
import './index.scss';
import '@arco-design/web-react/dist/css/arco.css';
import { Form, Input, Space, Button, RulesProps } from '@arco-design/web-react';
import { IconArrowRise, IconArrowFall, IconDelete } from '@arco-design/web-react/icon';
document.body.innerHTML = `<div id="root"></div>`;
interface User {
  name: string;
  address: string;
}
const App: FC = () => {
  const [form] = Form.useForm();
  return (
    <>
      <Form
        form={form}
        // initialValues={{ checkRules: [{ exp: 'not in', operate: '9999' }] }}
      >
        <Form.List
          field="checkRules"
          rules={[
            {
              validator(v: User[] | undefined, cb) {
                if (!v) {
                  return cb('至少有一项');
                }
                if (v?.length < 2) {
                  return cb('必须超过两条');
                }

                return cb();
              }
            }
          ]}
        >
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((item, index) => {
                  return (
                    <div key={item.key}>
                      <Form.Item label={'User ' + index}>
                        <Space>
                          <Form.Item field={item.field + '.exp'} rules={[{ required: true }]} noStyle>
                            <Input />
                          </Form.Item>
                          <Form.Item field={item.field + '.operate'} rules={[{ required: true }]} noStyle>
                            <Input />
                          </Form.Item>
                          <Button
                            icon={<IconDelete />}
                            shape="circle"
                            status="danger"
                            onClick={() => remove(index)}
                          ></Button>
                        </Space>
                      </Form.Item>
                    </div>
                  );
                })}
                <Form.Item wrapperCol={{ offset: 5 }}>
                  <Button
                    onClick={() => {
                      add();
                    }}
                  >
                    Add User
                  </Button>
                  <Button
                    // htmlType="submit"
                    onClick={async () => {
                      await form.validate();
                    }}
                  >
                    提交
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>
    </>
  );
};
const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(<App />);

export { App };
